<template>
  <div id="actor-list">
    <div style="padding:5px">
      <header>
        <div class="inner-left">
          <!-- <el-button type="primary"
                     size="small"
                     icon="el-icon-plus"
                     @click="handleAdd">新增</el-button> -->

          <!-- <el-input size="medium"
                    placeholder="关键字"
                    style="margin:0 5px;"
                    v-model="searchText"></el-input>
          <el-button-group style="display:flex">
            <el-button icon="el-icon-search"
                       style="padding: 10px 12px;"
                       size="medium">搜索</el-button>
            <el-button icon="el-icon-arrow-down"
                       style="padding: 10px 12px;"
                       size="medium"></el-button>
          </el-button-group> -->
        </div>
        <!-- <el-button-group>
          <el-button icon="el-icon-edit"
                     style="padding: 10px 12px;"
                     size="medium">导入</el-button>
          <el-button icon="el-icon-share"
                     style="padding: 10px 12px;"
                     size="medium">导出</el-button>
        </el-button-group> -->
        <!-- <batchTag :number="selections.length"
                  @delete="handleDelete"></batchTag> -->
      </header>
      <main>
        <el-table :data="tableData"
                  header-cell-class-name="table-header"
                  border
                  @selection-change="handleSelectionChange"
                  style="width: 100%">
          <el-table-column type="selection"
                           align="center"
                           width="55">
          </el-table-column>
          <el-table-column type="index"
                           show-overflow-tooltip
                           align="center"
                           label="序号"
                           width="80">
          </el-table-column>
          <el-table-column prop="type"
                           sortable
                           align="center"
                           width="100"
                           label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-select v-model="addObj.typeCode"
                           allow-create
                           default-first-option
                           filterable
                           @change="hanldeSelectChange">
                  <el-option v-for="a in actorTypeList"
                             :key="a.value"
                             :label="a.label"
                             :value="a.value"></el-option>
                  <!-- <el-option label="团体"
                             value="2"></el-option> -->
                </el-select>
              </div>
              <span v-else>{{scope.row.type}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           show-overflow-tooltip
                           align="center"
                           width="200"
                           sortable
                           label="名称">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <!-- <el-input v-model="addObj.name"></el-input> -->
                <el-autocomplete class="inline-input"
                                 v-model="addObj.name"
                                 :fetch-suggestions="querySearch"
                                 :trigger-on-focus="false"
                                 @select="handleSelect"></el-autocomplete>
              </div>
              <span v-else>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="unit"
                           show-overflow-tooltip
                           sortable
                           align="center"
                           label="单位">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.unit"></el-input>
              </div>
              <span v-else>{{scope.row.unit}}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="note"
                           show-overflow-tooltip
                           sortable
                           align="center"
                           label="备注">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.note"></el-input>
              </div>
              <span v-else>{{scope.row.note}}</span>
            </template>
          </el-table-column>
          <el-table-column label="关联"
                           align="center"
                           width="80">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.relate?'已关联':'未关联'">
                <el-switch v-if="scope.row.editRow"
                           @change="handleSwitchChange(addObj)"
                           v-model="addObj.relate"
                           :disabled="!addObj.actorId"
                           active-color="#13ce66">
                </el-switch>
                <el-switch v-else
                           @change="handleSwitchChange(scope.row)"
                           v-model="scope.row.relate"
                           active-color="#13ce66">
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           width="100"
                           label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.editRow && tabEdit">
                <el-button type="text"
                           size="mini"
                           @click="handleSave">保存</el-button>
                <el-button size="mini"
                           type="text"
                           @click="handleCancel">取消</el-button>
              </span>
              <span v-else>
                <el-button type="text"
                           @click="handleEdit(scope.row)">编辑</el-button>
                <!-- <el-button type="text"
                           @click="visible = true">详情</el-button> -->
              </span>
            </template>
          </el-table-column>
        </el-table>
      </main>
      <footer>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-plus"
                   @click="handleAdd">新增</el-button>
        <el-button type="danger"
                   :disabled="selections.length===0"
                   size="small"
                   icon="el-icon-delete"
                   @click="handleDelete">删除</el-button>
        <!-- <el-pagination background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page.sync="pagination.page"
                       :page-size="pagination.size"
                       :total="pagination.total"
                       :page-sizes="[10, 20, 30]"
                       layout="total, prev, pager, next, jumper">
        </el-pagination> -->
      </footer>
    </div>

    <el-dialog title="演职员编辑"
               width="450px"
               @close="resetForm"
               :visible.sync="visible">
      <el-form label-width="50px">
        <el-form-item label="名称">
          <!-- <el-input v-model="addObj.name"></el-input> -->
          <el-autocomplete class="inline-input"
                           style="width:100%"
                           v-model="addObj.name"
                           :fetch-suggestions="querySearch"
                           :trigger-on-focus="false"
                           @select="handleSelect"></el-autocomplete>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addObj.typeCode"
                     default-first-option
                     filterable
                     allow-create
                     style="width:100%"
                     @change="hanldeSelectChange">
            <el-option v-for="a in actorTypeList"
                       :key="a.value"
                       :label="a.label"
                       :value="a.value"></el-option>
            <!-- <el-option label="团体"
                             value="2"></el-option> -->
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="单位">
          <el-input v-model="addObj.unit"></el-input>
        </el-form-item> -->
        <el-form-item label="备注">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                    v-model="addObj.note"></el-input>
        </el-form-item>

        <el-row style="text-align:right">
          <el-button size="small"
                     type="primary"
                     @click="handleSubmitEdit">提交</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import mixin from './mixin/mixin'
import actorApi from '../../../api/actor'

export default {
  name: 'ActorList',
  mixins: [mixin],
  props: {
    tableData: {
      type: Array,
      default: () => ([])
    },
    node: {
      default: () => ({}),
      type: Object
    }
  },
  mounted() {
    this.getActorType()
  },
  data() {
    return {
      // visible: false,
      tabEdit: false,
      addObj: {
        name: '',
        typeCode: '',
        type: '',
        unit: '',
        introduction: '',
        actorId: '',
        relate: false,
        note: '',
      },
      actorTypeList: []
    }
  },
  methods: {
    querySearch(queryString, cb) {
      this.addObj.actorId = ''
      this.queryActorByName(queryString, res => {
        const temp = res.map(t => {
          return {
            ...t,
            value: t.value + '(' + t.unit + ')'
          }
        })
        cb(temp);
      })
    },
    queryActorByName(text, cb) {
      const param = { query: text }
      actorApi.queryByName(param).then(res => {
        if (cb) cb(res.data.items || [])
      }).catch(err => {
        console.log(err)
      })
    },
    handleSelect(item) {
      this.addObj.actorId = item.id
      this.addObj.name = item.name
      // this.addObj.typeCode = item.typeCode || item.type
      this.addObj.unit = item.unit
      this.addObj.introduction = item.introduction
      this.addObj.note = item.note
      // this.addObj.type = item.type
      this.addObj.relate = true
      console.log(item);
    },
    hanldeSelectChange(v) {
      const arr = this.actorTypeList.filter(a => {
        return a.value === v
      })
      this.addObj.type = arr[0] && arr[0].label || v
    },
    getActorType() {
      actorApi.getActorType().then(res => {
        this.actorTypeList = res.data
      })
    },
    submitSimpleActor() {
      const param = { ...this.addObj, ...this.node }
      if (param.type === param.typeCode) param.typeCode = null
      actorApi.addActorByNodeId(param).then(res => {
        this.$parent.queryActorByNodeId()
      })
    },
    delete() {
      const param = {
        ids: this.selections.map(s => s.id).join(','),
        ...this.node
      }
      actorApi.deleteByNodeIds(param).then(res => {
        this.$parent.queryActorByNodeId()
      })
    },
    handleEdit(obj) {
      if (this.tabEdit) {
        this.emptyForm()
      }
      this.visible = true
      if (obj.typeCode === null) obj.typeCode = obj.type
      this.addObj = { ...obj }
    },
    handleSubmitEdit() {
      const param = { ...this.addObj, ...this.node }
      if (param.type === param.typeCode) param.typeCode = null
      actorApi.updateActorByNode(param).then(res => {
        this.visible = false
        this.$parent.queryActorByNodeId()
      })
    },
    handleSwitchChange(row) {
      // this.handleCancel()
      if (!row.id) {
        this.addObj.actorId = ""
        this.addObj.relate = false
      } else {
        row.category = this.node.category
        actorApi.actorLink(row).then(res => {
          this.$parent.queryActorByNodeId()
          if (res.code !== 0) {
            this.$message.error(res.message || '操作失败！')
          } else {
            this.$message.success(res.message || '操作成功！')
          }
          this.handleCancel()
        }).catch(err => {
          console.log(err)
          this.handleCancel()
          this.$parent.queryActorByNodeId()
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
#actor-list {
  width: 100%;
  height: 100%;
  @import "./scss/common.scss";
  .dialog-form {
    overflow: hidden;
    .form-item {
      float: left;
      width: 50%;
    }
    .long-item {
      width: 100%;
      /deep/ .el-form-item__label {
        line-height: 2;
      }
      /deep/ .el-form-item__content {
        line-height: 2;
      }
    }

    /deep/ .el-form-item {
      margin-bottom: 0;
    }
    /deep/ .item-special {
      label {
        line-height: 1 !important;
      }
    }
  }
}
</style>
